<template>
	<view class="vw100 flex-xy">
		<view class="vw96">
			<u--form labelPosition="left" labelWidth="150rpx" :model="model" :rules="rules" ref="loginForm">
				<u-form-item label="姓名" prop="loginForm.username" borderBottom ref="username">
					<u--input v-model="model.loginForm.username" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="loginForm.password" borderBottom ref="password">
					<u--input v-model="model.loginForm.password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="loginForm.code" borderBottom ref="code">
					<view class="w100 flex-spc-x">
						<view class="w70">
							<u--input v-model="model.loginForm.code" border="none"></u--input>
						</view>
						<view class="w30" @click="getCodeImgPic">
							<u--image :src="img" width="100%" height="80rpx">
							</u--image>
						</view>
					</view>

				</u-form-item>
			</u--form>
			<u-button @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		getCodeImg
	} from "@/request/api/login.js"
	export default {
		data() {
			return {
				img: "",
				model: {
					loginForm: {
						username: '',
						password: '',
						rememberMe: false,
						code: '',
						uuid: ''
					},
				},


				rules: {
					'loginForm.username': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'loginForm.password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					'loginForm.code': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.loginForm.setRules(this.rules)
		},
		computed: {

		},
		onShow() {
			this.getCodeImgPic()
		},
		onLoad() {

		},
		methods: {
			getCodeImgPic() {

				let data = getCodeImg().then(res => {
					this.img = 'data:image/gif;base64,' + res.img
					this.model.loginForm.uuid = res.uuid
				})

			},
			submit() {
				console.log("model", this.model)
				this.$refs.loginForm.validate().then(res => {
					uni.$u.toast('校验通过')
					this.$store
						.dispatch('Login', this.model.loginForm)
						.then(() => {
							this._.nb(-1)
						})
						.catch(() => {
							this.loading = false
							this.getCodeImgPic()
						})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},



		}
	}
</script>

<style lang="scss">

</style>
